
import React from 'react';
import PropTypes from 'prop-types';
import {injectIntl} from './intl';
import {Card, Row, Col, Table, Spin} from 'antd';
import {TABLE, DATE_FORMAT} from '../constants';
import {formatDateTime, conventEnumValueToString} from '../utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
const {Description} = DescriptionList;
import styles from './style.css';
import {faultType} from '../Enum';

// eslint-disable-next-line react/prefer-stateless-function
class Detail extends React.PureComponent {
    render() {
        const {details = []} = this.props.detail;
        const columns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.repairCode',
                    defaultMessage: '申请单号'
                }),
                dataIndex: 'repairCode',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.vin',
                    defaultMessage: 'VIN'
                }),
                dataIndex: 'vin'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.engineCode',
                    defaultMessage: '发动机号'
                }),
                dataIndex: 'engineCode'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.engineModelTransmissionModel',
                    defaultMessage: '变速箱号'
                }),
                dataIndex: 'engineModelTransmissionModel'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.saleDate',
                    defaultMessage: '销售日期'
                }),
                dataIndex: 'saleDate',
                render: text => formatDateTime(text, DATE_FORMAT)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.mileage',
                    defaultMessage: '行驶里程'
                }),
                dataIndex: 'mileage'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.faultType',
                    defaultMessage: '故障类型'
                }),
                dataIndex: 'faultType',
                render: text => conventEnumValueToString(faultType, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.column.faultDescription',
                    defaultMessage: '故障描述'
                }),
                dataIndex: 'faultDescription'
            }
        ];
        return (
            <div>
                <Spin spinning={this.props.loading}>
                    <Card>
                        <DescriptionList size="large" title={<Row><Col span={6}>{this.props.intl.formatMessage({
                            id: 'commonDetail.order.title',
                            defaultMessage: '基本信息'
                        })}</Col>
                        <Col className={styles.optionBtn} span={18}>{this.props.operations}</Col></Row>}>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.brand',
                                    defaultMessage: '品牌编号'
                                })}>
                                {this.props.detail.brandCode}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.dealerCode',
                                    defaultMessage: '总代编号'
                                })}>
                                {this.props.detail.dealerCode}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.country',
                                    defaultMessage: '国家'
                                })}>
                                {this.props.detail.country}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.productCategoryCode',
                                    defaultMessage: '车型'
                                })}>
                                {this.props.detail.productCategoryCode}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.partCode',
                                    defaultMessage: '零件号'
                                })}>
                                {this.props.detail.partCode}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.partName',
                                    defaultMessage: '零件名称'
                                })}>
                                {this.props.detail.partName}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.lv1FaultItemCode',
                                    defaultMessage: '故障代码一级'
                                })}>
                                {this.props.detail.lv1FaultItemCode}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.lv2FaultItemCode',
                                    defaultMessage: '故障代码二级'
                                })}>
                                {this.props.detail.lv2FaultItemCode}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.lv3FaultItemCode',
                                    defaultMessage: '故障代码三级'
                                })}>
                                {this.props.detail.lv3FaultItemCode}
                            </Description>
                            <Description
                                term={this.props.intl.formatMessage({
                                    id: 'commonDetail.info.quantity',
                                    defaultMessage: '单据数量'
                                })}>
                                {this.props.detail.quantity}
                            </Description>
                        </DescriptionList>
                    </Card>
                    <Card>
                        <Table
                            className="white-space-nowrap"
                            columns={columns}
                            rowKey="socClaimId"
                            pagination={false}
                            dataSource={details}
                            {...TABLE} />
                    </Card>
                </Spin>
            </div>
        );
    }
}

Detail.defaultProps = {
    detail: {},
};

Detail.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    loading: PropTypes.bool,
    operations: PropTypes.any,
};
export default injectIntl(Detail);
